<template>
  <div class="container">
    <div class="text-24">大厅</div>
    <div class="text-24 py-20px">快捷发布需求</div>
    <el-row :gutter="20">
      <div
        class="px-20px py-10px relative bg-#191919 cursor-pointer w-300px"
        @click="$router.push('/order/add')"
      >
        <!-- <img src="/hot-icon.png" class="absolute right-0 top-0" alt=""> -->
        <div class="text-36">仅选片</div>
        <div class="text-24">10年选片师 远程选片</div>
        <div class="text-20px">防截屏黑科技 加片保障</div>
      </div>
      <!-- <el-col :span="6" class="">
        <div class="px-20px py-10px relative bg-#191919">
          <img src="/hot-icon.png" class="absolute right-0 top-0" alt="" />
          <div class="text-36">先修后选</div>
          <div class="text-24">收益率最高</div>
          <div class="text-20px text-#414143">快修后选片 收益提高200%</div>
        </div>
      </el-col> -->
      <!-- <el-col :span="6" class="">
        <div class="px-20px py-10px relative bg-#191919">
          <div class="text-36">先选后修</div>
          <div class="text-24">传统模式</div>
          <div class="text-20px">全程线上对接返修 售后无忧</div>
        </div>
      </el-col> -->
      <!-- <el-col :span="6" class="">
      </el-col> -->
      <!-- <el-col :span="6" class="">
        <div class="px-20px py-10px relative bg-#191919">
          <div class="text-36">仅修图</div>
          <div class="text-24">快修/精修 双模式</div>
          <div class="text-20px">资金平台担保 验收后付款 安全可靠</div>
        </div>
      </el-col> -->
    </el-row>
    <div class="text-24 py-20px">流程导航</div>
    <div class="flex">
      <div class="flex-1 flex items-center relative">
        <img
          src="/func-hot-icon.png"
          alt=""
          class="absolute right-60px top--10px step-hot"
        >
        <div class="bg-#191919 px-15px py-10px flex items-center">
          <img src="/step-icon-1.png" class="step-icon">
          <span class="ml-10px text-20px whitespace-nowrap">远程接单</span>
        </div>
        <div class="text-24 px-20px">&gt;</div>
      </div>
      <div class="flex-1 flex items-center relative">
        <img
          src="/func-hot-icon.png"
          alt=""
          class="absolute right-60px top--10px step-hot"
        >
        <div class="bg-#191919 px-15px py-10px flex items-center">
          <img src="/step-icon-2.png" class="step-icon">
          <span class="ml-10px text-20px whitespace-nowrap">摄控管理</span>
        </div>
        <div class="text-24 px-20px">&gt;</div>
      </div>
      <div class="flex-1 flex items-center whitespace-nowrap">
        <div class="bg-#191919 px-15px py-10px flex items-center">
          <img src="/step-icon-3.png" class="step-icon">
          <span class="ml-10px text-20px whitespace-nowrap">待精修</span>
        </div>
        <div class="text-24 px-20px">&gt;</div>
      </div>
      <div class="flex-1 flex items-center">
        <div class="bg-#191919 px-15px py-10px flex items-center">
          <img src="/step-icon-4.png" class="step-icon">
          <span class="ml-10px text-20px whitespace-nowrap">待选片</span>
        </div>
        <div class="text-24 px-20px">&gt;</div>
      </div>
      <div class="flex-1 flex items-center relative">
        <img
          src="/func-hot-icon.png"
          alt=""
          class="absolute right-60px top--10px step-hot"
        >
        <div class="bg-#191919 px-15px py-10px flex items-center">
          <img src="/step-icon-5.png" class="step-icon">
          <span class="ml-10px text-20px whitespace-nowrap">AI排版</span>
        </div>
        <div class="text-24 px-20px">&gt;</div>
      </div>
      <div class="flex-1 flex items-center relative">
        <img
          src="/func-hot-icon.png"
          alt=""
          class="absolute right-60px top--10px step-hot"
        >
        <div class="bg-#191919 px-15px py-10px flex items-center">
          <img src="/step-icon-6.png" class="step-icon">
          <span class="ml-10px text-20px whitespace-nowrap">一键生产</span>
        </div>
        <div class="text-24 px-20px">&gt;</div>
      </div>
      <div class="flex-1 flex items-center">
        <div class="bg-#191919 px-15px py-10px flex items-center">
          <img src="/step-icon-7.png" class="step-icon">
          <span class="ml-10px text-20px whitespace-nowrap">完成</span>
        </div>
      </div>
    </div>
    <div class="text-24 py-20px">其他功能</div>
    <div class="flex">
      <div class="text-center mr-50px">
        <img src="/func-icon-1.png">
        <div class="text-16px">城市合伙人</div>
      </div>
      <div class="text-center mr-50px">
        <img src="/func-icon-2.png">
        <div class="text-16px">推广赚钱</div>
      </div>
      <div class="text-center mr-50px">
        <img src="/func-icon-3.png">
        <div class="text-16px">使用教程</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data () {
    return {}
  },
  mounted () {
    this.visible = true
  },
  methods: {}
}
</script>

<style lang="scss">
.container {
  padding: 20px 40px;
  box-sizing: border-box;
  color: #595a60;
  /* margin: 0 auto; */
  /* min-height: 100vh; */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* text-align: center; */
  .text-36 {
    font-size: 36px;
  }
  .text-24 {
    font-size: 24px;
  }
  .text-20px {
    font-size: 20px;
  }
  .py-10px {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .px-15px {
    padding-left: 15px;
    padding-right: 15px;
  }
  .step-icon {
    width: 31px;
    height: 31px;
  }
  .step-hot {
    width: 63px;
    height: 23px;
  }
  .px-20px {
    padding-left: 20px;
    padding-right: 20px;
  }
}
</style>
